<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-1 col-md-offset-2">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" id="btn1">
                新增员工数据
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>员工编号</th>
                    <th>员工名</th>
                    <th>员工性别</th>
                    <th>员工工资</th>
                    <th>员工密码</th>
                    <th>员工部门</th>
                    <th>员工出生日期</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="8" class="text-center">
                        <span id="tf"></span>
                        <!--                        <input type='text' id='pageNum' value='5'>-->
                        <span id="page"></span>/<span id="size"></span>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">操作员工</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="ename">员工名</label>
                        <input type="hidden" id="eno" value="-1">
                        <input type="text" class="form-control" id="ename" value="" name="ename" placeholder="员工名">
                    </div>
                    <div class="form-group">
                        <label for="pwd">员工密码</label>
                        <input type="password" class="form-control" id="pwd" value="" placeholder="pwd">
                    </div>
                    <div class="form-group">
                        <label for="pwd">员工性别</label>
                        <label class="radio-inline">
                            <input type="radio" name="esex" value="男" checked> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="esex" value="女"> 女
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="salary">员工工资</label>
                        <input type="number" class="form-control" id="salary" value="" placeholder="salary">
                    </div>
                    <div class="form-group">
                        <label for="salary">员工部门编号</label>
                        <select id="dno" name="dno">

                        </select>
                    </div>
                    <div class="form-group">
                        <label for="bornDate">员工出生日期</label>
                        <input type="date" class="form-control" id="bornDate" value="" placeholder="bornDate">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="formSub">Save</button>
            </div>
        </div>
    </div>
</div>
<script>


    function getByPage(pageNum) {
        var pageSize = $("#pageSize").val();
        $.ajax({
            url: "/emp/getByPage",
            type: "get",
            data: "pageNum=" + pageNum + "&pageSize=" + (pageSize == undefined ? 5 : pageSize),
            dataType: "json",
            success: function (result) {
                //清空子标签 防止 数据追加
                $("#tb").empty();
                $("#tf").empty();
                var list = result.list;
                for (let x in list) {
                    $("#tb").append("<tr>" +
                        "    <td>" + list[x].eno + "</td>" +
                        "    <td>" + list[x].ename + "</td>" +
                        "    <td>" + list[x].esex + "</td>" +
                        "    <td>" + list[x].salary + "</td>" +
                        "    <td>" + list[x].pwd + "</td>" +
                        "    <td>" + list[x].dno + "</td>" +
                        "    <td>" + list[x].bornDate + "</td>" +
                        "    <td>" +
                        "<button type='button' class='btn btn-danger' onclick='delEmp(" + list[x].eno + ")' >删除</button>" +
                        "<button type='button' class='btn btn-warning' onclick='updateEmp(" + list[x].eno + ")' >修改</button>" +
                        "</td>" +
                        "</tr>")
                }
                /* 设置分页条的数据 */
                $("#tf").append("" +
                    "<nav aria-label='Page navigation'>" +
                    "    <ul class='pagination'>" +
                    "        <li>" +
                    "            <a href='javascript:getByPage(1)' aria-label='Previous'>" +
                    "                <span aria-hidden='true'>首页</span>" +
                    "            </a>" +
                    "        </li>" +
                    "        <li>" +
                    "            <a href='javascript:getByPage(" + result.prePage + ")' aria-label='Previous'>" +
                    "                <span aria-hidden='true'>&laquo;</span>" +
                    "            </a>" +
                    "        </li>" +

                    "        <li>" +
                    "            <a href='javascript:getByPage(" + result.nextPage + ")' aria-label='Next'>" +
                    "                <span aria-hidden='true'>&raquo;</span>" +
                    "            </a>" +
                    "        </li>" +
                    "        <li>" +
                    "            <a href='javascript:getByPage(" + result.pages + ")' aria-label='Next'>" +
                    "                <span aria-hidden='true'>尾页</span>" +
                    "            </a>" +
                    "        </li>" +
                    "        <input type='text' id='pageSize' size='1' value='" + result.pageSize + "'>" +
                    "    </ul>" +
                    "</nav>" +
                    "");

                $("#page").text(result.pageNum);
                $("#size").text(result.pages);
            }
        })
    }

    function delEmp(eno) {
        if (confirm("是否确认删除")) {
            $.ajax({
                url: "/emp/delEmp/" + eno,
                type: "delete",
                success: function (result) {
                    if (result == 1) {
                        alert("删除成功");
                        getByPage($("#page").text())
                    } else {
                        alert("删除失败");
                    }
                }
            })
        }
    }

    function getDeptAll() {
        $.ajax({
            url: "/dept/getAll",
            type: "get",
            success: function (result) {
                //清空老数据
                $("#dno").empty();
                for (let x in result) {
                    $("#dno").append("<option value='" + result[x].dno + "'>" + result[x].dname + "</option>")
                }
            }
        })
    }

    function updateEmp(eno){
        $("#myModalLabel").text("修改员工");
        //1 查询这个用户的数据
        $.ajax({
            url:"/emp/getEmpByEno/"+eno,
            type:"get",
            dataType:"json",
            success:function (result) {
                console.log(result)
                $("#eno").val(result.eno);
                $("#ename").val(result.ename);
                $("#salary").val(result.salary);
                $("#pwd").val(result.pwd);
                $("#bornDate").val(result.bornDate);
                if (result.esex == '男') {
                    $("[name=esex]").eq(0).prop("checked",true);
                }else{
                    $("[name=esex]").eq(1).prop("checked",true);
                }
                $("#dno").val(result.dno);
            }
        })
        $("#myModal").modal("show");
    }

    $(function () {
        getByPage(1);
        //调用获取 部门下拉框数据
        getDeptAll();

        $("#btn1").click(function () {
            $('#myModal').modal('show');
            $("#myModalLabel").text("新增员工");
        })

        $("#formSub").click(function () {
            var esex = $("[name=esex]");
            var sex;
            // 遍历2个性别的单选框
            for (let esexKey in esex) {
                // 因为esex[esexKey] js对象 所以需要使用js方法
                //esex[esexKey]单选框对象.checked 获取是否选中的结果  true选中 false未选中
                if (esex[esexKey].checked) {
                    // 把选中的性别的值 .value 赋值给外面的sex变量
                    sex = esex[esexKey].value;
                }
            }
            var id = $("#eno").val();
            var emp = {
                eno: id,
                ename: $("#ename").val(),
                salary: $("#salary").val(),
                pwd: $("#pwd").val(),
                esex: sex,
                dno: $("#dno").val(),
                bornDate: $("#bornDate").val()
            }
            console.log(emp)
            //主键属于默认值 -1, 进行新增
            var url="/emp/addEmp";
            var type="post";
            var msg = "新增";
            // 主键不属于-1 即是修改
            if (id != -1) {
                url = "/emp/updateEmp";
                type = "put";
                msg = "修改";
            }

            $.ajax({
                url: url,
                type: type,
                data: JSON.stringify(emp),  // 把js对象转为json字符串
                contentType: "application/json",
                success: function (result) {
                    if (result == 1) {
                        alert(msg+"成功");
                        getByPage($("#page").text());
                        $('#myModal').modal('hide');
                        $("#eno").val("-1");
                        $("#ename").val("");
                        $("#salary").val("");
                        $("#pwd").val("");
                        $("#dno").children().eq(0).prop("selected",true);
                        // 设置性别默认值为男性
                        $("[name=esex]").eq(0).prop("checked",true);
                        $("#bornDate").val("");
                    } else {
                        alert(msg+"失败");
                    }
                }
            })

        })
    })
</script>
</body>
</html>